<template>
   <div>
        <div class="navs"></div>
        <div class="nav">
            <img class="logo" src="https://gw.alicdn.com/imgextra/i4/O1CN019XWXNq1aAPOVMYSiu_!!6000000003289-2-tps-167-63.png"
                alt="">
            <div class="search">
                <span>寻找宝贝店铺</span>
                <span>搜索</span>
            </div>
            <img class="qiandao" src="https://gw.alicdn.com/imgextra/i4/O1CN01ftum4629SHP6bCqTm_!!6000000008066-2-tps-99-99.png"
                alt="">
        </div>
   </div>
   

</template>

<script>
export default {

}
</script>

<style scoped>
body{
    background: #f4f4f4;
}
.nav{
    width: 100%;
    height: 1rem;
    display: flex;
    position: fixed;
    top: 0;
    background: #f5f5f5;
    z-index: 1000;
}
.navs{
    width: 100%;
        height: 1rem;
}
.nav .logo {
    width: 1.11rem;
    height: .42rem;
    margin:0.28rem 0.3rem 0 0.3rem ;
}
.nav .qiandao{
    width: 0.66rem;
    height: 0.66rem;
    margin:0.14rem 0.2rem 0 0.26rem ;
}
.nav .search {
    height: .7rem;
    flex: 1;
    display: flex;
    border: 1px solid #ff5000;
    margin-top: 0.14rem;
    border-radius: 0.35rem;
    justify-content: space-between;
    align-items: center;
}
.nav .search span:nth-child(1){
    color: #666666;
    margin-left: 0.35rem;
    font-size: 0.28rem;
}
.nav .search span:nth-child(2){
    width: 64px;
    height: 32px;
    color: #fff;
    border: 1px solid #fff;
    background: linear-gradient(to right, #FF8D0E, #FF5000);
    border-radius: 0.32rem;
    text-align: center;
    line-height: .64rem;
}
</style>